import React from 'react';
import { Button, Space, DatePicker, Form, Input, message } from 'antd';
import { UserOutlined } from '@ant-design/icons';

interface FormValues {
    username: string;
    date: Date;
}

const AntExample: React.FC = () => {
    const [form] = Form.useForm<FormValues>();

    const onFinish = (values: FormValues) => {
        message.success('提交成功！');
        console.log('表单值:', values);
    };

    return (
        <div style={{ padding: '24px' }}>
            <Space direction="vertical" size="large" style={{ width: '100%' }}>
                <h2>Ant Design 示例</h2>

                <Form
                    form={form}
                    name="basic"
                    labelCol={{ span: 8 }}
                    wrapperCol={{ span: 16 }}
                    onFinish={onFinish}
                    autoComplete="off"
                >
                    <Form.Item
                        label="用户名"
                        name="username"
                        rules={[{ required: true, message: '请输入用户名！' }]}
                    >
                        <Input prefix={<UserOutlined />} placeholder="请输入用户名" />
                    </Form.Item>

                    <Form.Item
                        label="日期"
                        name="date"
                        rules={[{ required: true, message: '请选择日期！' }]}
                    >
                        <DatePicker style={{ width: '100%' }} />
                    </Form.Item>

                    <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                        <Button type="primary" htmlType="submit">
                            提交
                        </Button>
                    </Form.Item>
                </Form>
            </Space>
        </div>
    );
};

export default AntExample; 